<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Van Gogh-Link Test task</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script></script>
</head>

<body class="full">
    <header>
        <div class="header-wrp center">
            <div class="header__main-logo">
                <a href="#"><img src="./img/main-logo.svg" alt="main-logo"></a>
            </div>
            <nav class="header__nav">
                <ul class="header__list-links">
                    <li><a href="#" class="header__link">Интернет</a></li>
                    <li><a href="#" class="header__link">Телевидение</a></li>
                    <li class="header__profit">Выгодно
                        <div class="header__profit-block" id="profitBlock">
                            <ul class="profit-list">
                                <li class="profit-link"><a href="#">Интернет + TV</a></li>
                                <li class="profit-link"><a href="#">Конструктор тарифа</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#" class="header__link">Видеонаблюдение</a></li>
                    <li><a href="#" class="header__link">Оборудование</a></li>
                    <li class="header__info">Информация
                        <div class="header__info-block" id="infoBlock">
                            <ul class="info-list">
                                <li class="info-link"><a href="#">Новости</a></li>
                                <li class="info-link"><a href="#">Вакансии</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#" class="header__link">Контакты</a></li>
                </ul>
            </nav>
            <ul class="header__contacts">
                <li><a class="header__tel" href="tel:+7(3496)45-80-00">+7 (3496) 45-80-00</a></li>
            </ul>
            <div class="mobile-btns-wrp">
                <button class="header__account">
                    <img src="img/user-logo.svg" alt="user-accout">
                </button>
                <button class="header__burger-btn">
                    <div class="header__burger"></div>
                </button>
            </div>
        </div>
    </header>

    <main>
        <section class="top-banner-wrp">
            <div class="center top-banner">
                <ul class="top-banner__content">
                    <li class="top-banner__title">
                        <p>Системы видеонаблюдения по отличной цене
                            в Ноябрьске</p>
                    </li>
                    <li>
                        <button class="top-banner__button">Подключить</button>
                    </li>
                </ul>

            </div>
            <div class="top-banner__img">
                <img src="img/banner_camere.png" alt="banner_camere">
            </div>
        </section>

        <section class="services">
            <div class="services__title center">Доступные услуги</div>
            <div class="services__wrp center">
                <article class="services__plate">
                    <div>
                        <img src="img/services_city.png" alt="camere for city">
                        <p class="plate__title">Городские камеры</p>
                        <p class="plate__subtitle">Будьте в курсе всех событий не выходя
                            из дома
                        </p>
                    </div>
                    <footer class="plate__price-btn">
                        <div class="plate__price">
                            <p class="plate__price-txt"><span>руб</span><br> мес</p>
                            <!-- Тут указана цена -->
                        </div>
                        <div class="plate__btn-wrp">
                            <button class="plate__btn">Узнать подробнее</button>
                        </div>
                    </footer>
                </article>

                <article class="services__plate">
                    <div>
                        <img src="img/yard.png" alt="camere for yard">
                        <p class="plate__title">Дворовые камеры</p>
                        <p class="plate__subtitle">Наблюдайте за вашим имуществом не выходя
                            из дома через любое устройство
                        </p>
                    </div>
                    <footer class="plate__price-btn">
                        <div class="plate__price">
                            <p class="plate__price-txt"><span>руб</span><br> мес</p>
                            <!-- Тут указана цена -->
                        </div>
                        <div class="plate__btn-wrp">
                            <button class="plate__btn">Узнать подробнее</button>
                        </div>
                    </footer>
                </article>

                <article class="services__plate">
                    <div>
                        <img src="img/personal.png" alt="camere for you">
                        <p class="plate__title">Персональные камеры</p>
                        <p class="plate__subtitle">Где бы вы ни находились, вы всегда можете узнать о происходящем дома
                            с
                            любого
                            устройства
                        </p>
                    </div>
                    <footer class="plate__price-btn">
                        <div class="plate__price--special">

                            <p class="plate__price-txt--special"><span>руб</span><br> мес</p>
                            <p class="price-number--special"><span>от</span> 350</p>
                        </div>
                        <div class="plate__btn-wrp">
                            <button class="plate__btn">Узнать подробнее</button>
                        </div>
                    </footer>
                </article>
            </div>
        </section>
    </main>

    <aside class="fixed-block">
        <button class="paymentButton">Оплатить услуги<img src="img/wallet-aside.svg" alt="wallet-aside"></button>
        <button class="paymentButton-mobile">Оплатить<img src="img/wallet-aside.svg" alt="wallet-aside"></button>
    </aside>

    <script src="script.js"></script>
</body>

</html>